<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>龙湖社区管理系统列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <!--引入本地的css样式-->
  <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../static/css/admin.css" media="all">
</head>
<body>

  <div class="layui-fluid">   
    <div class="layui-card">
      <!--搜索框-->
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
          <div class="layui-form-item">
            <div class="layui-input-inline">
              <label class="layui-form-label">户主名称</label>
              <div class="layui-input-block">
                  <input type="text" name="huzhu_name" id="huzhu_name" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn layuiadmin-btn-admin" id="btn_search" lay-submit lay-filter="LAY-user-back-search">
                  <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
            </div>
          </div>

      </div>


      <div class="layui-card-body">
        <!--头部工具栏 id="toolbarDemo" lay-event="事件名"-->
        <script type="text/html" id="toolbarDemo">
          <div class="layui-btn-container">
            <!-- lay-event 给元素绑定事件名 -->
            <button class="layui-btn layuiadmin-btn-admin" lay-event="batchdel">
             批量删除
            </button>
            <button class="layui-btn layuiadmin-btn-admin" lay-event="add_house">
              添加
            </button>
          </div>
        </script>

        <!--数据表格-->
        <table class="layui-hide" id="LAY-user-back-manage" lay-filter="LAY-user-back-manage"></table>

<!--        <script type="text/html" id="employeeSexTpl">-->
<!--          {{#  if(d.employee_sex == 1){ }}-->
<!--          <span>男</span>-->
<!--          {{#  } else if(d.employee_sex == 2){ }}-->
<!--          <span>女</span>-->
<!--          {{#  } }}-->
<!--        </script>-->
        <!-- laytpl模板引擎 数据库状态字段
        1转换成正常显示到页面；2转换成冻结显示到页面 3转换成删除显示到页面 -->
<!--        <script type="text/html" id="statusTpl">-->
<!--          {{#  if(d.status == 1){ }}-->
<!--          <span>正常</span>-->
<!--          {{#  } else if(d.status == 2){ }}-->
<!--          <button type="button" class="layui-btn-xs layui-btn-disabled">冻结</button>-->
<!--          {{#  } else if(d.status == 3){ }}-->
<!--          <button type="button" class="layui-btn-xs layui-btn-danger">删除</button>-->
<!--          {{#  } }}-->
<!--        </script>-->


<!--        <script type="text/html" id="buttonTpl">-->
<!--          {{#  if(d.check == true){ }}-->
<!--            <button class="layui-btn layui-btn-xs">已审核</button>-->
<!--          {{#  } else { }}-->
<!--            <button class="layui-btn layui-btn-primary layui-btn-xs">未审核</button>-->
<!--          {{#  } }}-->
<!--        </script>-->

<!--        <script type="text/html" id="table-useradmin-admin">-->
<!--          <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>-->
<!--          {{#  if(d.role == '超级管理员'){ }}-->
<!--          <a class="layui-btn  layui-btn-xs"><i class="layui-icon layui-icon-delete"></i>删除</a>-->
<!--          {{#  } else { }}-->
<!--          <a class="layui-btn  layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>-->
<!--          {{#  } }}-->
<!--        </script>-->

          <!--侧边工具栏 id=barDemo lay-event="事件名"-->
        <script type="text/html" id="barDemo">
          <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>

      </div>
    </div>
  </div>

<script src="../../static/js/jquery-3.6.0.min.js"></script>
<!--引入本地layui.js-->
<script src="../../static/layui/layui.js"></script>
<!--js-->
<script type="text/javascript">
    layui.config({
        base: '../../static/layui/layuiadmin/' //静态资源所在路径js
    }).extend({
        index: 'lib/index' //主入口模块
    }).use('index');
</script>

  <script type="text/javascript">
    layui.use(['table','form'],function(){
      var table = layui.table;
      var form = layui.form;
      //表格方法渲染：把数据显示在数据表格中
      table.render({
        elem:'#LAY-user-back-manage',
        url:'/house/queryHouseList',
        title:'房产数据表',
        toolbar:'#toolbarDemo',//头部工具栏
        cols:[[
          //       设置复选框列
          {type:'checkbox',fixed:'left'},
          //       设置表头
          {field:'id',title:'ID',fixed:'left',unresize:true},
          {field:'community_id',title:'小区'},
          {field:'dong_id',title:'栋数'},
          {field:'house_num',title:'房产编码'},
          {field:'house_name',title:'房产名称'},
          {field:'huzhu_name',title:'户主名称'},
          {field:'huzhu_tel',title:'联系方式'},
          {field:'house_type',title:'房间数'},
          {field:'house_depart',title:'单元'},
          {field:'house_level',title:'楼层'},
          {field:'status',title:'状态'},
        //         侧边工具栏
          {field:'侧边工具栏',toolbar:'#barDemo',fixed:'right',width:'150px'},
        ]],
        page:true,
        limits:[5,10,15,20]
      })
      //监听行工具事件/侧边工具事件
      table.on('tool(LAY-user-back-manage)',function (obj){
        //选中当前行的数据
        var data = obj.data;
        //获取事件名称
        var event = obj.event();
        if(event === 'del'){//删除事件
          
        }else if(event === 'edit') {//编辑事件

        }
      })
    })

  </script>

</body>
</html>

